<template>
	<view class="">
			<u-navbar title='售后列表' :leftIcon="isShowBack" :autoBack="true" bgColor="transparent"></u-navbar>
				<view class="select">
					<uni-data-select @change="changeState"  placeholder="售后状态"  style="width: 250rpx;"  v-model="state" :localdata="stateList"></uni-data-select>
				</view>
				<image src="https://renovationcdn.jiachuangnet.com/talentPool/bg6.png"
					style="width: 100%;height:363rpx;position: absolute;top:0;left:0;z-index: 10"></image>
				<view style="position: absolute;width:700rpx;left:25rpx;top:215rpx;z-index: 11;">
					<view class="content">
						<view class="item" v-for="(v,i) in afterSalesList" :key="i">
							<view class="name flex">
								<view class="flex">
									{{v.assignName}}
									<view class="type">
										{{v.storeType==1?'普通店':'旗舰店'}}
									</view>
								</view>
								<view class="time" v-show="v.state==0||v.state==1">
									剩余
									<text style="color: #ED115E;">{{v.timeDifference}}</text>
									小时结束
								</view>
							</view>
							<view class="person_name flex">
								<view class="flex">
									<view @click="call(v.projectPhone)">
										<image src="https://renovationcdn.jiachuangnet.com/tx.png" mode="" style="width: 24rpx;height: 25rpx;margin-right: 1rpx;"></image>
										{{v.projectUserName}}
									</view>
									<view v-if="v.state!==0&&(loginType==3||loginType==0||loginType==1)" class="flex" style="margin-left: 87rpx;" @click="taskAssignmentFn(v.afterId,v.afterType,v.assignTaskId,v.state,1)">
										<u-icon name="eye-fill" color="#ffac3e" size="18" ></u-icon>
										查看售后人员
									</view>
								</view>
								<view style="width: 120rpx;" v-if="v.state==0&&loginType==3">
									<u-button   type="primary" size="small" text="指派" @click="taskAssignmentFn(v.afterId)" ></u-button>
								</view>
								<view style="width: 120rpx;" v-if="v.state==1&&loginType==3">
									<u-button  type="primary" size="small" text="完成" @click="finishShowFn(v.afterId)" ></u-button>
								</view>
								<view style="width: 120rpx;" v-if="v.state==2&&v.isSatisfaction==0&&loginType==4">
									<u-button  type="primary" size="small" text="评价" @click="userReviewsShowFn(v.afterId)" ></u-button>
								</view>
								<view style="width: 120rpx;" v-if="v.state==2&&v.isSatisfaction==0&&loginType!=4">
									<text style="color: #f6bf1d;">待评价</text>
								</view>
								<view style="width: 120rpx;" v-if="v.state==2&&v.isSatisfaction!=0">
									<text :style="{color: v.isSatisfaction==1?'#e04135':'#2b9447' }">{{v.isSatisfaction==1?'不满意':'满意'}}</text>
								</view>
							</view>
							<view class="address">
								<view class="flex" style="justify-content: start;">
									<u-icon name="map-fill" color="#4e82f7" size="20"></u-icon>
									地址：{{v.address}}
								</view>
							</view>
							 <u-collapse
							 :border="false"
							  >
							    <u-collapse-item
							      :title="v.afterType?'售后类型：'+v.afterType:'售后类型：未指定'"
							      name="afterSale"
								  :border="false"
							    >
									<view class="imgWrapper flex" style="flex-wrap: wrap;justify-content: flex-start;">
										<image v-for="(url,index) in v.afterProblemImg" @click="viewImgChoose(i,index)" :src="'https://'+url" mode="" style="width: 203rpx;height: 166rpx;margin: 10rpx;"></image>
									</view>
									<view class="description">
										<view class="title">
											问题描述
										</view>
										<view class="text">
											{{v.afterProblem}}
										</view>
									</view>
									<view class="description" v-if="v.customerEvaluation">
										<view class="title">
											客户评价
										</view>
										<view class="text">
											{{v.customerEvaluation}}
										</view>
									</view>
									<!-- <view style="padding: 20rpx 0;">
										<u-button  type="primary" text="补发" v-if="v.state==1&&loginType==3" @click="reissueHandler(v.assignTaskId,v.storeType,v.afterId)"></u-button>
									</view> -->
							    </u-collapse-item>
							  </u-collapse>
							 <view class="state">
							 	<image
									v-if="v.state==0"
							 		src="https://renovationcdn.jiachuangnet.com/weikaishi.png"
							 		style="width: 116rpx;height:100rpx;">
							 	</image>
								<image
									v-if="v.state==1"
									src="https://renovationcdn.jiachuangnet.com/index/jinxz.png"
									style="width: 116rpx;height:100rpx;">
								</image>
								<image
									v-if="v.state==2"
									src="https://renovationcdn.jiachuangnet.com/index/yiwancheng.png"
									style="width: 116rpx;height:100rpx;">
								</image>
								<image
									v-if="v.state==3"
									src="https://renovationcdn.jiachuangnet.com/index/yiyuqi.png"
									style="width: 116rpx;height:100rpx;">
								</image>
								<image
									v-if="v.state==4"
									src="https://renovationcdn.jiachuangnet.com/index/yiwancheng.png"
									style="width: 116rpx;height:100rpx;">
								</image>
							 </view>
						</view>
					</view>
					<view style="width: 100%;height: 50vh;" v-if="afterSalesList.length===0">
						<u-empty
						        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
								width="100%"
								height="100%"
								text="数据为空"
						>
						</u-empty>
					</view>
				</view>
				<u-popup :show="finishShow" @close="closeFinishShow" round="10" mode="bottom">
					<view class="overdueForm">
						<view class="overdueForm_title">
							<text>确认完成</text>
						</view>
						<text style="color: #cb2d01;padding-right: 5rpx;">*</text><text>上传图片:</text>
						<view style="width: 100%;height: 20rpx;"></view>
						<upload  v-if="finishShow"  name="afterSale"  @uploadFile="finishImg" ></upload>
						<view style="border:1rpx solid #eee;box-sizing: border-box;margin:30rpx 0;">
						<u-textarea v-model='problemDescription' placeholder="描述"></u-textarea>
						</view>
						<u-button shape="circle" :color='color' @click="addAppraise">提交</u-button>
					</view>
				</u-popup>
				<u-popup :show="userReviewsShow" @close="closeUserReviewsShow" round="10" mode="bottom">
					<view class="overdueForm">
						<view class="overdueForm_title">
							<text>客户评价</text>
						</view>
						<text style="color: #cb2d01;padding-right: 5rpx;">*</text><text>是否满意: (不满意系统将重新为您新建售后记录)</text>
						 <u-radio-group
						    v-model="radiovalue1"
						    placement="column"
						  >
						    <u-radio
						      :customStyle="{marginBottom: '8px'}"
						      v-for="(item, index) in radiolist1"
						      :key="index"
						      :label="item.name"
						      :name="item.name"
						    >
						    </u-radio>
						  </u-radio-group>
						<view style="border:1rpx solid #eee;box-sizing: border-box;margin:30rpx 0;">
						<u-textarea v-model='userReviewsDescription' placeholder="描述"></u-textarea>
						</view>
						<u-button shape="circle" :color='color' @click="addUserReviews">提交</u-button>
					</view>
				</u-popup>
				<u-popup :show="taskAssignmentShow" @close="closeTaskAssignment" round="10" mode="bottom">
					<view class="task_assignment_wrapper">
						<view class="title" style="margin-bottom: 20rpx;">
							售后类型(多选)
						</view>
						 <u-checkbox-group
						            v-model="checkboxValue1"
						            placement="column"
						            @change="checkboxChange"
									:disabled="activeState==2"
						        >
						            <u-checkbox
						                :customStyle="{marginBottom: '8px'}"
						                v-for="(item, index) in afterTypeList"
						                :key="index"
						                :label="item.name"
						                :name="item.name"
						            >
						            </u-checkbox>
						        </u-checkbox-group>
						<!-- <u--textarea  v-model="taskAssignmentForm.message" placeholder="请输入留言" ></u--textarea> -->
						<view class="flex" style="align-items: center;margin-top: 30rpx;">
							<view class="info_title flex" style="margin: unset; ">
								<view class="boder-left"></view>
								施工人员(可多选)
							</view>
							<u-icon v-if="activeState!=2" @click="toPath" name="plus-circle-fill" color="#13989A" size="24"></u-icon>
						</view>
						 <u-swipe-action>
						        <u-swipe-action-item
						          :options="options1"
								  v-for="(item,index) in talentList" :key="index"
								  @click="deleteTalent(index)"
								  :disabled="activeState==2"
						        >
						          <view class="list_talent">
						          	<view class="flex" style="padding: 20rpx 0;" >
						          		<view class="name">
						          			{{item.nickName}}
						          		</view>
						          		<view class="photo" @click="call(item.phone||item.phoneNum)">
											<image style="width: 24rpx;height: 24rpx;"
												src="https://renovationcdn.jiachuangnet.com/details/mobile.png">
											</image>
						          			{{item.phone||item.phoneNum}}
						          		</view>
						          		<view class="role_name">
						          			{{item.roleName}}
						          		</view>
						          		<!-- <view class="run">
						          			50Km
						          		</view> -->
						          	</view>
						          </view>
						        </u-swipe-action-item>
						      </u-swipe-action>
						<view class="btn" v-if="activeState!=2">
							<u-button type="primary" :plain="true" text="保存" @click="addAssignedWorkerInfo"></u-button>
						</view>
					</view>
				</u-popup>
				
				<newTabbar v-if="tabbarShow" style="position: fixed;top:0;bottom:0;z-index:10000000" :index='0'
					:tabbarList="tabbarList"></newTabbar>
				
	</view>
</template>

<script>
import formItem from '../../uni_modules/uview-ui/libs/config/props/formItem';
import gridItem from '../../uni_modules/uview-ui/libs/config/props/gridItem';
	import newTabbar from '@/components/newTabbar/index.vue'
	let app = getApp();
	export default{
		components: {
			
			newTabbar
		},
		data() {
			return {
				openType:'mime', //mine 代表从个人中心进来  tabbar 代表从首页进来
				tabbarList: [{
						'text': '首页',
						'path': 'settled',
						'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/indexed.png',
						'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/index.png',
						'name': '首页'
					},
					{
						'text': '我的',
						'path': 'mine',
						'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mined.png',
						'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mine.png',
						'name': '我的'
					}
				],
				activeState:0,
				loginType:null,
				color: '#c7ccd3',
				pageNumber:1,
				tabbarShow: false,
				pageSize:10,
				color: app.globalData.defaultColor,
				afterSalesList:[],
				talentList:[],
				longitude:0,
				latitude:0,
				state:null,
				talentListShow:false,
				taskAssignmentShow:false,
				userReviewsShow:false,
				finishShow:false,
				problemDescription:'',
				userReviewsDescription:'',
				finishImgList:[],
				checkboxValue1:null,
				afterType:[],
				isCheck:false,
				afterTypeList:[],
				stateList:[{
					value:null,
					text:'全部'
				},{
					value:0,
					text:'未开始'
				},{
					value:1,
					text:'进行中'
				},{
					value:2,
					text:'已完成'
				},{
					value:3,
					text:'已逾期'
				}],
				afterId:0,
				radiovalue1:'',
				radiolist1:[{
            name: '满意',
            disabled: false
          },
            {
              name: '不满意',
              disabled: false
            }],
				 options1: [{text: '删除'}],
				taskAssignmentForm:{
					message:''
				}
			}
		},
		computed:{
			isShowBack(){
				if(this.loginType === 5 && this.openType === 'tabbar'){
					return ''
				}else {
					return 'arrow-left'
				}
			}
		},
		onShow() {
			
			uni.getStorage({
				key: 'loginType',
				success: (res) => {
					console.log('首播tabbar',res.data);
					if( res.data === 5 && this.openType === 'tabbar'){
						this.tabbarShow = true
					}else {
						this.tabbarShow = false
					}
				}
				})
			this.getAssignTaskAfterVo()
			this.getAfterTypeVo()
			uni.getLocation({
			  type: 'wgs84', // 坐标类型，默认为wgs84，可选的值为gcj02和bd09ll
			  success: res => {
			    // 获取成功，经度和纬度在res.longitude和res.latitude中
				this.longitude=res.longitude
				this.latitude=res.latitude
			  },
			  fail: err => {
			    // 获取失败，err为错误信息
			    console.log('getLocation err:', err);
			  }
			});
		},
		onReachBottom() {
			// if(this.cooperativeShopList.length>=this.total){
			// 	this.status='noMore'
			// 	return
			// }
			this.pageNumber++;
			this.getAssignTaskAfterVo()
		},
		onLoad(query) {
			console.log('query',query);
			this.loginType= uni.getStorageSync('loginType')
			if(query.openType){
				this.openType = query.openType
			}
			if(query.afterId){
				this.isCheck=query.isCheck
				this.afterId=query.afterId
				let app = getApp();
				this.talentList=app.globalData.talentList
				this.checkboxValue1=app.globalData.checkboxValue1
				this.taskAssignmentShow=true
			}
		},
				methods: {
					call(phone) {
						uni.makePhoneCall({
							phoneNumber: phone,
							success: (res) => {
								console.log(res)
							}
						})
					},
					viewImgChoose(i,index){
						uni.previewImage({
							current:index,
							urls:this.afterSalesList[i].afterProblemImg.map(url=>'http://'+url),
							longPressActions: {
								itemList: ['保存图片'],
								success: data=> {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
									uni.closePreviewImage()
									/* 保存图片到系统相册 */
									if(data.tapIndex==0){
										uni.getImageInfo({
													src:this.afterSalesList[i].afterProblemImg.map(url=>'http://'+url)[data.index],
													success: function(res) {
														console.log(res)
														uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
															filePath:res.path, //图片文件路径
															success: function() {
																uni.showToast({
																	title: '图片保存成功',
																	icon: 'none',
																});
															},
															fail: function(e) {
																console.log(e);
																uni.showToast({
																	title: '图片保存失败',
																	icon: 'none',
																});
															},
														});
													},
													fail: function(e) {
														console.log(e);
														uni.closePreviewImage()
														uni.showToast({
															title: '图片保存失败',
															icon: 'none',
														});
													},
												})
									}
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						})
					},
					changeState(){
						this.afterSalesList=[]
						this.pageNumber=1
						this.getAssignTaskAfterVo()
					},
					reissueHandler(assignTaskId,storeType,afterId){
						uni.navigateTo({
							url:`/pages/addMaterimal/index?assignTaskId=${assignTaskId}&storeType=${storeType}&state=3&afterId=${afterId}`
						})
					},
					addUserReviews(){
						if(this.radiovalue1.length&&this.userReviewsDescription.length){
							uni.$u.http.post('/after/updateIsSatisfaction',{
								isSatisfaction:this.radiovalue1=='满意'?2:1,
								afterId:this.afterId,
								customerEvaluation:this.userReviewsDescription
							}).then(res=>{
								uni.$u.toast('评价成功');
								this.closeUserReviewsShow()
								this.afterSalesList=[]
								this.pageNumber=1
								this.getAssignTaskAfterVo()
							})
						}else{
							return uni.$u.toast('请完善内容');
						}
						
					},
					addAppraise(){
						if(!this.problemDescription.length){
							return uni.$u.toast('描述不能为空');
						}
						uni.$u.http.post('/after/updateAfterConfirmCompletion',{
							afterCompletion:this.problemDescription,
							afterId:this.afterId,
							afterCompletionImg:this.finishImgList
						}).then(res=>{
							uni.$u.toast('确认完成');
							this.closeFinishShow()
							this.afterSalesList=[]
							this.pageNumber=1
							this.getAssignTaskAfterVo()
						})
					},
					userReviewsShowFn(afterId){
						this.afterId=afterId
						this.userReviewsShow=true
					},
					finishShowFn(afterId){
						this.afterId=afterId
						this.finishShow=true
					},
					deleteTalent(e){
						// console.log(e)
						this.talentList.splice(e,1)
					},
					checkboxChange(){
						
					},
					taskAssignmentFn(afterId,afterType,assignTaskId,state,flag){
						this.afterId=afterId
						if(flag){
							this.isCheck=true
							this.checkboxValue1=afterType.split(',')
							this.assignTaskId=assignTaskId
							this.activeState=state
							// 查看售后人员
							
							uni.$u.http.get('/after/getAssignedWorkerVo',{
								params:{
									afterId:this.afterId,
									assignTaskId:this.assignTaskId
								}
							}).then(res=>{
								if(res){
									this.talentList=res
								}
							})
							
						}
						
						this.taskAssignmentShow=true
					},
					addAssignedWorkerInfo(){
						let afterTypeStr=null
						afterTypeStr=this.checkboxValue1.map(typeName=>{
							let typeId=null
							this.afterType.some(item2=>{
								if(item2.afterName==typeName){
									typeId=item2.id
									return true
								}
							})
							return typeId
						})
						if(!this.isCheck){
							uni.$u.http.post('/after/addAssignedWorkerInfo',{
								afterId:this.afterId,
								afterType:afterTypeStr.join(','),
								list:this.talentList.map(item=>item.talentId)
							}).then(res=>{
								uni.$u.toast('指派成功');
								this.closeTaskAssignment()
								this.afterSalesList=[]
								this.pageNumber=1
								this.getAssignTaskAfterVo()
							})
						}else{
							uni.$u.http.post('/after/addAssignedWorkerInfo',{
								afterId:this.afterId,
								afterType:afterTypeStr.join(','),
								list:this.talentList.map(item=>item.talentId)
							}).then(res=>{
								uni.$u.toast('保存成功');
								this.closeTaskAssignment()
								this.afterSalesList=[]
								this.pageNumber=1
								this.getAssignTaskAfterVo()
							})
						}
						
						
					},
					finishImg(msg){
						this.finishImgList=msg.files
					},
					closeTaskAssignment(){
						this.afterId=0
						let app = getApp();
						app.globalData.talentList=[]
						app.globalData.checkboxValue1=[]
						this.talentList=[]
						this.checkboxValue1=null
						this.taskAssignmentShow=false
						this.assignTaskId=0
						this.activeState=0
					},
					closeFinishShow(){
						this.afterId=0
						this.finishShow=false
					},
					closeUserReviewsShow(){
						this.afterId=0
						this.userReviewsShow=false
					},
					// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
					getDistances(lat2, lng2) {
						if(this.latitude&&this.longitude){
							let EARTH_RADIUS = 6378.137;// 地球半径
							let radLat1 = this.latitude * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
							let radLat2 = lat2 * Math.PI / 180.0;
							let a = radLat1 - radLat2;
							let b = this.longitude * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
							let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
							s = s * EARTH_RADIUS; 
							s = Math.round(s * 10000) / 10000;// 输出为公里
							return { m: s * 1000, km: Number(s.toFixed(2)) }
						}else{
							return { m: 0, km: 0 }
						}
						
					},
					toPath(){
						let app = getApp();
						// 初始化
						app.globalData.talentList=this.talentList
						// 保存起来
						app.globalData.checkboxValue1=this.checkboxValue1
						
						uni.navigateTo({
							url:`/pages/afterSalesTalentPool/index?afterId=${this.afterId}&isCheck=${this.isCheck}`
						})
					},
					getTimeDifference(time){
						let date = new Date(time);
						let currentDate = new Date(); 
						// 计算时间差（以毫秒为单位）
						let timeDifference = date - currentDate;
						
						// 将时间差转换为小时
						let hoursDifference = (timeDifference / (1000 * 60 * 60)).toFixed(0);
						return hoursDifference
					},
					getAfterTypeVo(){
						uni.$u.http.get('/after/getAfterTypeVo').then(res=>{
							if(res){
								this.afterType=res
								this.afterTypeList=res.map(item=>{
									return {
										name:item.afterName,
										disabled: false
									}
								})
							}
						})
					},
					getAssignTaskAfterVo(){
						return uni.$u.http.post('/after/getAssignTaskAfterVo',{
							pageNumber:this.pageNumber,
							pageSize:this.pageSize,
							state:this.state
						}).then((res)=>{
							if(res && res.data && res.data.length){
								// 处理剩余时间
								console.log('售后',res);
								let handler= res.data.map(item=>{
									item.timeDifference=this.getTimeDifference(item.remainingTime)
									return item
								})
								console.log(handler)
								this.afterSalesList=[...this.afterSalesList,...handler]
							}
						})
					},
		
				}
	}
</script>

<style>
page{
background:#f8f8f8;
}
</style>
<style lang="scss" scoped>
	::v-deep.select{
		position: absolute;
		z-index: 12;
		top:100rpx;
		left:100rpx;
		.uni-select{
			border: unset;
		}
	}
	
	.overdueForm_title {
		font-weight: 700;
		display: flex;
		justify-content: center;
	}
	
	.overdueForm {
		padding: 50rpx 15rpx;
	}
	
	::v-deep.content{
		.u-collapse{
			border-top: 1px dotted #d2ebec;
		}
		.u-cell__title-text{
			font-weight: bold;
			font-size: 30rpx;
			color: #1E272E;
		}
		.u-cell__body{
			padding-left: unset;
			padding-right: unset;
		}
		.u-collapse-item__content__text{
			padding-left: unset;
			padding-right: unset;
		}
	}
	
	.content{
		padding-bottom: 50rpx;
		.item{
			position: relative;
			.name{
				font-weight: bold;
				font-size: 32rpx;
				color: #1E272E;
				padding: 20rpx 0;
				.type{
					font-weight: 500;
					font-size: 24rpx;
					color: #13989A;
					background-color: #e7f4f5;
					margin-left: 20rpx;
					padding: 8rpx;
					border-radius: 10rpx;
				}
				.time{
					font-weight: 500;
					font-size: 24rpx;
					color: #8A8A8A;
				}
			}
			.state{
				position: absolute;
				top: 220rpx;
				right: 60rpx;
			}
			.address{
				font-weight: 500;
				font-size: 28rpx;
				color: #8A8A8A;
				margin-bottom: 32rpx;
				margin-top: 15rpx;
			}
			.description{
				.title{
					font-weight: bold;
					font-size: 30rpx;
					color: #1E272E;
					margin: 30rpx 0;
				}
				.text{
					background: #F5F5F5;
					padding: 30rpx 22rpx;
					border-radius: 10rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #8A8A8A;
					line-height: 45rpx;
				}
			}
		}
		
	}
	
	.task_assignment_wrapper{
		position: relative;
		height: 50vh;
		overflow-y: auto;
		padding: 33rpx 23rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #1E272E;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			color: #1E272E;
			line-height: 40rpx;
		}
		.list_talent{
			font-weight: 500;
			font-size: 28rpx;
			color: #1E272E;
			line-height: 40rpx;
		}
		.btn{
			width: 100rpx;
			position: absolute;
			bottom: 50rpx;
			left:50%;
			transform: translate(-50%,0);
		}
	}
	
	.score{
		font-weight: bold;
		font-size: 28rpx;
		color: #ED115E;
		margin-left: 20rpx;
	}
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.border {
		border: 1rpx solid #eee;
		border-radius: 40rpx;
		overflow: hidden;
	}
	.content {
		width: 700rpx;
		margin: 0 auto;
	}

	.item {
		width: 660rpx;
		padding: 20rpx;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.label {
		color: #999;
		width: 180rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.val {
		color: #333;
		font-size: 28rpx;
		max-width: 70%;
	}

	.master_wrapper{
		display: flex;
		padding: 10rpx 11rpx;
		.master_left{
			flex:1;
			margin-top: 11rpx;
		}
		.master_right{
			.text{
				font-weight: 500;
				font-size: 28rpx;
				color: #1E272E;
			}
			width: 560rpx;
			padding-left: 16rpx;
			.name{
				font-weight: bold;
				font-size: 30rpx;
				color: #1E272E;
			}
			.post{
				font-weight: 500;
				font-size: 26rpx;
				color: #1E272E;
			}
			.verity{
				width: 86rpx;
				line-height: 38rpx;
				background: #13989A;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}
			.introduce{
				font-weight: 500;
				font-size: 26rpx;
				color: #8A8A8A;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
	}
</style>